// Buttons
//
// In the below examples, you'll find markup with either anchor elements or button elements for the buttons.
// Use a `<button>` element if it's a form element or if the button performs some action on the page
// (usually with javascript), such as filtering. Use an anchor button if the button opens a new page
// (either in a modal or by navigating to the new page).
//
// Styleguide 4.

// Buttons
//
// Here are the main button styles.
//
// .btn-primary - A button that causes a state change or performs a action.
// .btn-secondary - A button for secondary operations, like filtering, clearing or cancelling.
// .btn-link - A button that looks like a link but has the same margins as a button.
//
// Markup:
// <button type="button" class="btn {{modifier_class}}">Button</button>
//
// Styleguide 4.1.

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; // for input
    -webkit-user-select: none; // for button
    -moz-user-select: none;
    -ms-user-select: none;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.btn {
    display: inline-block;
    font-weight: $btn-font-weight;
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
    cursor: pointer;
    user-select: none;
    border: $border-width solid transparent;
    @include button-size(5px, $btn-padding-x, $font-size-base, 24px, $btn-border-radius);
    @include transition(all 0.2s ease-in-out);

    &,
    &:hover {
        text-decoration: none;
    }

    @include hover-focus {
        text-decoration: none;
    }

    &.focus {
        text-decoration: none;
    }

    &:active,
    &.active {
        background-image: none;
        outline: 0;
        @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
    }

    &.disabled,
    &:disabled {
        cursor: $cursor-disabled;

        &,
        &:hover {
            color: $btn-link-disabled-color;
            border-color: $btn-link-disabled-color;
        }
    }

    .header-block & {
        padding: 2px 1em;
    }
}

.btn + .btn {
    margin-left: $spacer * 0.5;
}

.btn-icon + .btn-icon {
    margin-left: 0;
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
    cursor: not-allowed;
}

.btn-primary {
    min-width: $btn-min-width;
    @include button-variant(
        $btn-primary-color,
        $btn-primary-bg,
        $btn-primary-border,
        $btn-primary-bg,
        $btn-primary-color,
        $btn-primary-color
    );
}

.btn-secondary {
    min-width: $btn-min-width;
    @include button-variant(
        $btn-secondary-color,
        $btn-secondary-bg,
        $btn-secondary-border,
        $btn-primary-bg,
        $btn-primary-color,
        $btn-primary-color,
        $btn-secondary-color,
        lighten($brand-primary, 50%),
        $btn-secondary-border
    );
}

// Make a button look and behave like a link
.btn-link {
    font-weight: normal;
    color: $link-color;
    border-radius: 0;
    border-width: 0;

    &,
    &:active,
    &.active,
    &:disabled {
        background-color: transparent;
        @include box-shadow(none);
    }

    &,
    &:focus,
    &:active {
        border-color: transparent;
    }

    @include hover {
        border-color: transparent;
    }

    @include hover-focus {
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;
        background-color: transparent;
    }

    &:disabled {
        @include hover-focus {
            color: $btn-link-disabled-color;
            text-decoration: none;
        }
    }
}

// Icon buttons
//
// Icons buttons.
//
// .btn-icon - An icon button
// .btn-icon-border - An icon button with a border
//
// Markup:
// <button type="button" class="btn {{modifier_class}}">
//   <svg class="icon icon-svg icon-svg-checkmark" viewBox="0 0 17 17">
//     <use xlink:href="#checkmark" />
//   </svg>
// </button>
//
// Styleguide 4.2.

.btn-icon {
    @extend .btn-link;
    @extend .icon;
    padding: 3px;
    margin: 0;
    margin-left: 16px;
    font-size: $font-size-sm;
    line-height: 24px;
    border-width: 0;
    color: $grey-dark;

    &:first-child {
        margin-left: 0;
    }

    svg {
        height: 24px;
        width: 24px;
        vertical-align: top;
    }

    &:hover {
        color: $grey-dark;
        opacity: 1;
    }

    &.disabled {
        border: 0;
    }

    &.btn-icon-sm {
        svg {
            height: 18px;
            width: 18px;
        }
    }
}

.btn-icon-border {
    @include button-variant(
        $link-color,
        $btn-secondary-bg,
        $btn-secondary-border,
        $btn-secondary-color,
        lighten($brand-primary, 50%),
        $btn-secondary-border
    );

    $btn-icon-height: 24px;
    $btn-icon-padding-v: 5px;
    padding: $btn-icon-padding-v $btn-icon-padding-v * 2;
    margin: 0 0 0 8px;

    svg {
        height: $btn-icon-height;
        width: $btn-icon-height;
        vertical-align: top;
    }

    &:first-child {
        margin-left: 0;
    }
}

// Button Group
//
// A button group is a group of buttons, ofter used for pagers or filters on a page. The button group collapses
// into a dropdown selector when if overflows past the window width.
//
// If you want to choose the point at which the button group collapses, you can specify a max width for the button
// group using `data-max-width="*"` where `*` is a number, in pixels; or you can specify the button group container,
// which the button group will never overflow outside of by setting `data-container-selector="*"` where `*` is the
// jQuery selector string for the element.
//
// Markup:
// <div class="btn-group padded-bottom">
//   <a class="btn btn-secondary active">Button 1</a>
//   <a class="btn btn-secondary">Button 2</a>
//   <a class="btn btn-secondary">Button 3</a>
// </div>
// <div class="btn-group" data-max-width="200">
//   <a class="btn btn-secondary active">Button 1</a>
//   <a class="btn btn-secondary">Button 2</a>
//   <a class="btn btn-secondary">Button 3</a>
// </div>
//
// Styleguide 4.3.

.btn-group {
    font-size: 0;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    > .btn {
        // Bring the "active" button to the front
        &:focus,
        &:active,
        &.active {
            z-index: 2;
        }
    }

    .btn {
        border-radius: 0;
        margin-right: -$input-btn-border-width;

        &:first-child {
            border-top-left-radius: $border-radius;
            border-bottom-left-radius: $border-radius;
        }

        &:last-child {
            border-top-right-radius: $border-radius;
            border-bottom-right-radius: $border-radius;
        }
    }

    // Prevent double borders when buttons are next to each other
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
        margin-left: -$input-btn-border-width;
    }

    .btn-icon + .btn-icon {
        margin-left: 6px;
    }
}

// Small Rounded Buttons
//
// Navbar and card buttons.
//
// Styleguide 4.4.

@mixin button-sm-rounded {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;

    svg {
        margin-top: -2px;
    }

    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, 10px, 14px, $btn-border-radius-navbar);
}

// Small Rounded Button
//
// Markup:
// <a class="btn btn-sm-rounded" href="#">
//   Check it out
//   <svg class="icon icon-svg icon-svg-external-link icon-12 icon-text" viewBox="0 0 17 17">
//     <use xlink:href="#external-link" />
//   </svg>
// </a>
//
// Styleguide 4.4.1.

.btn-sm-rounded {
    @include button-sm-rounded();
    @include button-variant(
        $btn-secondary-color,
        $btn-secondary-bg,
        $btn-secondary-border,
        $btn-primary-bg,
        $btn-primary-color,
        $btn-primary-color,
        $btn-secondary-color,
        lighten($brand-primary, 50%),
        $btn-secondary-border
    );
}

// Navbar button
//
// Markup:
// <a class="btn btn-navbar" href="#">
//   Check it out
//   <svg class="icon icon-svg icon-svg-external-link icon-12" viewBox="0 0 17 17">
//     <use xlink:href="#external-link" />
//   </svg>
// </a>
//
// Styleguide 4.4.2.

.btn-navbar {
    @include button-sm-rounded();
    @include button-variant(
        $navbar-link-color,
        $brand-primary,
        $navbar-link-color,
        $navbar-link-color,
        lighten($brand-primary, 12%),
        $navbar-link-color
    );
}

.btn-container {
    display: flex;
    align-items: center;
}
